<template>
    <van-nav-bar title="购物车" left-text="" left-arrow @click-left="goBack" />
    <van-checkbox-group v-model="checkedlist">
        <div class="cart" v-for="item in cartlist" :key="item.id">
            <van-checkbox :name="item.id"></van-checkbox>
            <van-swipe-cell>
                <van-card :price="item.total" :thumb="item.product.thumbs_text" @click-thumb="toPages(item.proid)">
                    <template #title>
                        <h3>{{ item.product.name }}</h3>
                    </template>
                    <template #desc>
                        <div v-if="item.attrs">
                            <van-tag v-for="items in item.attrs" type="primary" size="large"
                                style="margin-right: 10px;">{{ items.value }}</van-tag>
                        </div>
                        <h4>单价: {{ item.price }}</h4>
                    </template>
                    <template #num>
                        <van-stepper v-model="item.nums" integer @change="changeNum(item)" />
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="CartDel(item)" />
                </template>
            </van-swipe-cell>
        </div>
    </van-checkbox-group>

    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedAll" @click="checkedAllEvent">全选</van-checkbox>
    </van-submit-bar>

</template>
<script setup>
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get('LoginUser'));
const cartlist = ref([])
const checkedlist = ref([])
const checkedAll = ref(false)
const goBack = () => {
    proxy.$router.push('/')
}
onBeforeMount(() => {
    getCartData()
})

const getCartData = async () => {
    let result = await Api.CartIndex({
        busid: LoginUser.id
    })

    if (result.code == 1) {
        cartlist.value = result.data

        cartlist.value.forEach(item => {
            if (item.attrs) {
                item.attrs = JSON.parse(item.attrs)
            }
        })
    }
}
const toPages = (proid) => {
    proxy.$router.push({
        path: '/product/info',
        query: {
            proid: proid
        }
    })
}

const total = computed(() => {
    let num = 0;
    cartlist.value.forEach((item) => {
        if (checkedlist.value.includes(item.id)) {
            num += parseFloat(item.total)
        }
    })

    if (checkedlist.value.length >= cartlist.value.length && checkedlist.value.length >= 0) {
        checkedAll.value = true
    } else {
        checkedAll.value = false
    }
    return num * 100;
})

const checkedAllEvent = () => {
    if (checkedAll.value) {
        checkedlist.value = cartlist.value.map((item) => item.id)
    } else {
        checkedlist.value = []
    }
}


const changeNum = async (val) => {
    if (val.nums > 0) {
        let result = await Api.CartEdit({
            busid: LoginUser.id,
            cartid: val.id,
            nums: val.nums
        })

        if (result.code == 1) {
            success(result.msg)
            getCartData()
        } else {
            error(result.msg);
        }
    }
}

const CartDel = (val) => {
    Confirmdialog({
        message:
            `确认是否删除${val.product.name}商品?`,
    }).then(async () => {
        let result = await Api.CartDel({
            busid: LoginUser.id,
            cartid: val.id,
        })
        if (result.code == 1) {
            getCartData()
        } else {
            error(result.msg);
        }
    }).catch(() => { });
}

const onSubmit = () => {
    if (checkedlist.value.length <= 0) {
        error('请选择购物车商品');
        return false;
    }

    proxy.$router.push({
        path: '/product/confirm',
        query: {
            cartids: checkedlist.value.toString()
        }
    })

}
</script>
<style scoped>
.cart {
    display: flex;
    align-items: center;
    width: 100%;
}

.cart .van-swipe-cell {
    width: 100%;
}

.cart .van-swipe-cell__right .van-button {
    height: 100%;
}
</style>